/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-21 14:05:06
 * @LastEditTime: 2021-04-27 14:46:58
 * @LastEditors: Please set LastEditors
 */
import useStore from '@/context/useStore';
import React, { useEffect, useState } from 'react';
import styles from './Archive.less';
import ArchiveSon from "@/component/File/ArchiveSon"
import {useHistory} from 'umi'
import Loading from "@/component/Articel/loding"
import Category from "@/component/Articel/category"
import Articles from "@/component/Articel/articles";

import { Affix } from 'antd';
import { observer } from 'mobx-react-lite';

interface Iprops{
  match:any
}

const Page:React.FC<Iprops> = (props) => {
  let {file} = useStore();
  let history = useHistory()
  const [top, setTop] = useState(10);
  // const [bottom, setBottom] = useState(10);
  
  useEffect(() => {
    file.getFile()
  }, [])
 
  function Cli(id:string){
    file.getdetail(id)
    console.log(id)
    history.push(`/index/Details/${id}`)
  }

  return (
    <div className={styles.box}>
      <div className={styles.left}>
        <ArchiveSon/>
        {
          Object.keys(file.FileList).reverse().map((item)=>{
            return <div key={item} className={styles.bigBox}>
              <h2> {item} </h2>
                {
                  Object.keys(file.FileList[item]).map((it:any,index:number)=>{
                    return <div key={index}>
                      <h3> &emsp;&emsp; {it} </h3>
                      <ul>
                        {
                          Object.values(file.FileList[item][it]).map((em:any)=>{
                            return (
                              <p onClick={()=>{Cli(em.id)}}>
                                <li key={em.id}>
                                    <i> {em.publishAt.slice(5,10)} </i><span>{em.title}</span>
                                </li>
                               </p>)
                          })
                        }
                      </ul>
                    </div>
                  })
                }
            </div>
          })
        }
      </div>
      
      <div className={styles.right}>
      <Affix offsetTop={top}>
          <div>
            <Loading/>
            <br/>
            <Articles/>
          </div>
      </Affix>
          
      </div>
    </div>
  );
}
export default observer(Page) 